<!--
* @author wn
* @date 2022/07/27 10:42:42
* @description: QQ登录回调页 绑定账号 与手机号 页
!-->
<template>
	<!-- 表单 手机验证码 -->
	<Form
		class="xtx-form"
		ref="target"
		:validation-schema="mySchema"
		v-slot="{ errors }"
	>
		<div class="xtx-form-item">
			<div class="input">
				<i class="iconfont icon-user"></i>
				<Field
					name="account"
					v-model="form.account"
					type="text"
					placeholder="请输入用户名"
					:class="{ errors: errors.account }"
				/>
			</div>
			<div class="error">
				<i class="iconfont icon-warning" v-if="errors.account" />
				{{ errors.account }}
			</div>
		</div>
		<div class="xtx-form-item">
			<div class="input">
				<i class="iconfont icon-phone"></i>
				<Field
					name="mobile"
					v-model="form.mobile"
					type="number"
					placeholder="绑定的手机号"
					:class="{ errors: errors.mobile }"
				/>
			</div>
			<div class="error">
				<i class="iconfont icon-warning" v-if="errors.mobile" />
				{{ errors.mobile }}
			</div>
		</div>
		<div class="xtx-form-item">
			<div class="input">
				<i class="iconfont icon-code"></i>
				<Field
					name="code"
					v-model="form.code"
					type="number"
					placeholder="请输入验证码"
					:class="{ errors: errors.code }"
				/>
				<span class="code" @click="btnSend">
					{{ time === 0 ? '发送验证码' : `${time}秒后发送` }}
				</span>
			</div>
			<div class="error">
				<i class="iconfont icon-warning" v-if="errors.code" />
				{{ errors.code }}
			</div>
		</div>
		<div class="xtx-form-item">
			<div class="input">
				<i class="iconfont icon-lock"></i>
				<Field
					name="password"
					v-model="form.password"
					type="password"
					placeholder="请输入密码"
					:class="{ errors: errors.password }"
				/>
			</div>
			<div class="error">
				<i class="iconfont icon-warning" v-if="errors.password" />
				{{ errors.password }}
			</div>
		</div>
		<div class="xtx-form-item">
			<div class="input">
				<i class="iconfont icon-lock"></i>
				<Field
					name="rePassword"
					v-model="form.rePassword"
					type="password"
					placeholder="请确认密码"
					:class="{ errors: errors.rePassword }"
				/>
			</div>
			<div class="error">
				<i class="iconfont icon-warning" v-if="errors.rePassword" />
				{{ errors.rePassword }}
			</div>
		</div>
		<a href="javascript:;" class="submit" @click="register">立即提交</a>
	</Form>
</template>
<script>
import { Form, Field } from 'vee-validate'
import schema from '@/utils/vee-validate-schema'
import { ref, reactive } from 'vue'
import { useCountDownBtn, useQQLoginSavePush } from '@/hooks'
import { userQQPatchCode, userQQPatchLogin } from '@/network/user'
import Message from '@/components/library/message'

export default {
	name: 'RegisterSection',
	components: { Form, Field },
	setup() {
		const target = ref(null)
		const form = reactive({
			account: null,
			password: null,
			rePassword: null,
			mobile: null,
			code: null,
		})
		// 获取验证码
		const { time, resume } = useCountDownBtn()
		// 组件销毁时  也要停止定时器
		// onUnmounted(() => pause())
		// 发送手机验证码
		const btnSend = async () => {
			// 1 校验 手机号正确  true  失败-->String String也是true ===
			const mobileResult = schema.mobile(form.mobile)
			// 2 且倒计时 必须是0 其他时间已经触发过了 在等待中
			if (mobileResult === true && time.value === 0) {
				try {
					// 3 调用获取验证码接口
					await userQQPatchCode(form.mobile)
					// 4 无需结果  能继续执行 就是成功
					// 5 开启定时器 与 消息提示 与 60秒
					time.value = 60
					resume()
					Message({ type: 'success', message: '发送成功' })
				} catch (error) {
					Message({
						type: 'warn',
						message: `${
							error.response ? error.response.data.message : '发送失败'
						}`,
					})
				}
			} else {
				// 5 校验失败  errors 提示  time不是 0 校验成功不提示
				// Form组件 setFieldError(哪个name,错误信息)触发 v-slot="{ errors }.mobile
				mobileResult === true ||
					target.value.setFieldError('mobile', mobileResult)
			}
		}
		const mySchema = {
			account: schema.accountApi,
			password: schema.password,
			rePassword: schema.rePassword,
			mobile: schema.mobile,
			code: schema.code,
		}
		// register  立即提交
		const register = async () => {
			const valid = await target.value.validate()
			if (valid) {
				// hook
				try {
					await useQQLoginSavePush(() =>
						// 此处需要更改 注册API  没有 openId
						userQQPatchLogin(
							666,
							form.mobile,
							form.code,
							form.account,
							form.password
						)
					)
				} catch (e) {
					Message({
						type: 'error',
						message: `${e.response ? e.response.data.message : '登陆失败'}`,
					})
				}
			} else {
				// 表单验证失败
				Message({ type: 'warn', message: '表单校验失败' })
			}
		}
		return { target, mySchema, form, time, btnSend, register }
	},
}
</script>
<style scoped lang="less">
.xtx-form {
	padding-top: 50px;
}
</style>
